/* 整体容器样式 */
.prototype-container {
    margin-bottom: 2.5rem;
}

/* iPhone 15 Pro 样式模拟 */
.phone-frame {
    width: 375px;
    height: 812px;
    background-color: white;
    border-radius: 44px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    border: 12px solid #1a1a1c;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.phone-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 15px 25px rgba(0, 0, 0, 0.1);
}

/* 状态栏样式 */
.status-bar {
    height: 48px;
    background-color: #000;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

/* 状态栏内容 - 时间 */
.status-bar::before {
    content: "9:41";
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 状态栏内容 - 电池、WiFi等图标 */
.status-bar::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 80px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='16' viewBox='0 0 80 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M64 3C62.3431 3 61 4.34315 61 6V10C61 11.6569 62.3431 13 64 13H75.5C77.1569 13 78.5 11.6569 78.5 10V6C78.5 4.34315 77.1569 3 75.5 3H64Z' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M80 7.5V8.5C80 8.5 80.5 8.5 80.5 8C80.5 7.5 80 7.5 80 7.5Z' fill='white'/%3E%3Crect x='62.5' y='5.5' width='14.5' height='5' rx='1' fill='white'/%3E%3Cpath d='M56.5 3.5C56.5 2.67157 55.8284 2 55 2C54.1716 2 53.5 2.67157 53.5 3.5V12.5C53.5 13.3284 54.1716 14 55 14C55.8284 14 56.5 13.3284 56.5 12.5V3.5Z' fill='white'/%3E%3Cpath d='M50.5 5.5C50.5 4.67157 49.8284 4 49 4C48.1716 4 47.5 4.67157 47.5 5.5V10.5C47.5 11.3284 48.1716 12 49 12C49.8284 12 50.5 11.3284 50.5 10.5V5.5Z' fill='white'/%3E%3Cpath d='M44.5 6.5C44.5 5.67157 43.8284 5 43 5C42.1716 5 41.5 5.67157 41.5 6.5V9.5C41.5 10.3284 42.1716 11 43 11C43.8284 11 44.5 10.3284 44.5 9.5V6.5Z' fill='white'/%3E%3Cpath d='M38.5 7.5C38.5 6.67157 37.8284 6 37 6C36.1716 6 35.5 6.67157 35.5 7.5V8.5C35.5 9.32843 36.1716 10 37 10C37.8284 10 38.5 9.32843 38.5 8.5V7.5Z' fill='white'/%3E%3Cpath d='M17.6756 5.57178C19.0876 5.57178 19.9836 6.69178 19.9836 8.25178C19.9836 9.82178 19.0796 10.9338 17.6516 10.9338C16.9796 10.9338 16.4956 10.6898 16.1956 10.3098H16.1316V12.5098H15.3516V5.66178H16.0956V6.26978H16.1596C16.4716 5.87178 16.9716 5.57178 17.6756 5.57178ZM17.5076 10.2338C18.4676 10.2338 19.1636 9.44578 19.1636 8.25178C19.1636 7.06578 18.4676 6.27178 17.5076 6.27178C16.5796 6.27178 15.8756 7.04978 15.8756 8.25178C15.8756 9.46178 16.5796 10.2338 17.5076 10.2338Z' fill='white'/%3E%3Cpath d='M24.3521 10.9338C22.9081 10.9338 21.9801 9.81378 21.9801 8.25178C21.9801 6.68978 22.9081 5.57178 24.3521 5.57178C25.7961 5.57178 26.7241 6.68978 26.7241 8.25178C26.7241 9.81378 25.7961 10.9338 24.3521 10.9338ZM24.3521 10.2338C25.3201 10.2338 25.9041 9.43778 25.9041 8.25178C25.9041 7.06578 25.3201 6.27178 24.3521 6.27178C23.3841 6.27178 22.8001 7.06578 22.8001 8.25178C22.8001 9.43778 23.3841 10.2338 24.3521 10.2338Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* iframe 样式设置 */
iframe {
    width: 100%;
    height: calc(100% - 48px); /* 减去状态栏高度 */
    border: none;
    background: white;
}

/* 底部导航栏样式 - 在各页面HTML中实现 */
.tab-bar {
    height: 84px;
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 11px;
    padding: 8px 0;
    width: 25%;
    transition: all 0.2s ease;
}

.tab-item.active {
    color: #007aff;
    transform: translateY(-2px);
}

.tab-icon {
    font-size: 22px;
    margin-bottom: 5px;
    position: relative;
}

.tab-item.active .tab-icon:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #007aff;
}

/* 通用样式 */
.app-container {
    padding: 20px;
    padding-bottom: 100px; /* 为底部导航栏留出空间 */
    height: 100%;
    background-color: #f7f8fa;
    overflow-y: auto;
}

.card {
    background: white;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.section-header {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111827;
    letter-spacing: -0.3px;
}

.input-group {
    margin-bottom: 20px;
}

.input-label {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 8px;
    font-weight: 500;
}

.input-field {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #e4e7eb;
    padding: 0 16px;
    font-size: 16px;
    transition: all 0.2s;
    background-color: #f9fafb;
}

.input-field:focus {
    outline: none;
    border-color: #a7c8ff;
    box-shadow: 0 0 0 3px rgba(99, 167, 255, 0.15);
    background-color: #fff;
}

.btn-primary {
    background: #0070f3;
    color: white;
    border: none;
    border-radius: 12px;
    height: 50px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0, 112, 243, 0.2);
}

.btn-primary:hover {
    background: #005fe3;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 112, 243, 0.25);
}

.btn-secondary {
    background: #f2f5f9;
    color: #111827;
    border: none;
    border-radius: 12px;
    height: 50px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #e9ecf1;
    transform: translateY(-1px);
}

/* 按钮激活状态 */
.btn-primary:active, .btn-secondary:active {
    transform: translateY(1px);
    opacity: 0.9;
}

/* 通用头部导航栏 */
.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    margin-bottom: 24px;
}

.nav-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
}

.nav-action {
    color: #0070f3;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.nav-action:hover {
    opacity: 0.8;
}

/* 列表样式 */
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.list-item:hover {
    background-color: rgba(0, 0, 0, 0.01);
}

.list-item:last-child {
    border-bottom: none;
}

.list-label {
    font-size: 17px;
    color: #111827;
    font-weight: 500;
}

.list-value {
    font-size: 16px;
    color: #6b7280;
    font-weight: 400;
}

/* 图表容器 */
.chart-container {
    width: 100%;
    height: 220px;
    margin: 10px 0;
    padding: 8px;
    background-color: #fcfcfc;
    border-radius: 12px;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.chart-container:hover {
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* 日期卡片特殊样式 */
.date-card {
    background-color: #ebf5ff;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.date-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* 动态百分比条 */
.progress-bar {
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1.5s ease;
}

/* 自定义滚动条 */
.app-container::-webkit-scrollbar {
    width: 8px;
}

.app-container::-webkit-scrollbar-track {
    background: transparent;
}

.app-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

/* 美化选择器 */
select.input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* 图标按钮样式 */
.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f5f9;
    color: #4b5563;
    transition: all 0.2s;
}

.icon-btn:hover {
    background-color: #e9ecf1;
    transform: translateY(-2px);
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* 数据展示卡片样式 */
.data-card {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.data-card-blue {
    background-color: #ebf8ff;
    border: 1px solid rgba(56, 189, 248, 0.1);
}

.data-card-pink {
    background-color: #fdf2f8;
    border: 1px solid rgba(236, 72, 153, 0.1);
}

.data-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.data-value {
    font-size: 24px;
    font-weight: 700;
    margin: 8px 0;
}

.data-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* 灵动岛动画效果 */
.dynamic-island {
    width: 120px;
    height: 36px;
    background-color: black;
    border-radius: 20px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dynamic-island:hover {
    width: 200px;
    height: 60px;
    border-radius: 30px;
}

/* 暗色模式开关 */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0070f3;
}

input:checked + .slider:before {
    transform: translateX(24px);
} 